<template>
  <button
    class="edu-btn u-line-1 u-fix-ios-appearance"
    :class="[
      'edu-size-' + size,
      plain ? 'edu-btn-' + type + '-plain' : 'edu-btn-' + type,
      shape == 'circle' ? 'edu-round-circle' : '',
      disabled ? `edu-btn-${type}${plain ? '-plain' : ''}-disabled` : '',
      hairLine ? showHairLineBorder : 'edu-btn-bold-border',
    ]"
    :disabled="disabled"
    :form-type="formType"
    :open-type="openType"
    @getphonenumber="getphonenumber"
    @getuserinfo="getuserinfo"
    @tap.stop="click($event)"
    :style="[customStyle]"
  >
    <slot></slot>
  </button>
</template>

<script>
import uButton from '@/uview-ui/components/u-button/u-button.vue'
export default {
  components: {
    uButton,
  },
  props: {
    // 是否细边框
    hairLine: {
      type: Boolean,
      default: true,
    },
    // 按钮的预置样式，default，primary，text
    type: {
      type: String,
      default: 'default',
    },
    // 按钮尺寸，default，medium，mini
    size: {
      type: String,
      default: 'default',
    },
    // 按钮形状，circle（两边为半圆），square（带圆角）
    shape: {
      type: String,
      default: 'square',
    },
    // 按钮是否镂空
    plain: {
      type: Boolean,
      default: false,
    },
    // 是否禁止状态
    disabled: {
      type: Boolean,
      default: false,
    },
    // 开放能力，具体请看uniapp稳定关于button组件部分说明
    // https://uniapp.dcloud.io/component/button
    openType: {
      type: String,
      default: '',
    },
    // 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
    // 取值为submit（提交表单），reset（重置表单）
    formType: {
      type: String,
      default: '',
    },
    // 节流，一定时间内只能触发一次
    throttleTime: {
      type: [String, Number],
      default: 1000,
    },
    // 自定义样式，对象形式
    customStyle: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  computed: {
    showHairLineBorder() {
      if (['primary', 'text'].indexOf(this.type) >= 0 && !this.plain) {
        return ''
      } else {
        return 'edu-hairline-border'
      }
    },
  },
  methods: {
    // 按钮点击
    click(e) {
      // 进行节流控制，每this.throttle毫秒内，只在开始处执行
      this.$u.throttle(() => {
        // 如果按钮时disabled状态，不触发水波纹效果
        if (this.disabled) return
        this.$emit('click', e)
      }, this.throttleTime)
    },
    // 下面为对接uniapp官方按钮开放能力事件回调的对接
    getphonenumber(res) {
      this.$emit('getphonenumber', res)
    },
    getuserinfo(res) {
      this.$emit('getuserinfo', res)
    },
  },
}
</script>
<style lang="scss" scoped>
.edu-btn::after {
  border: none;
}
.edu-btn {
  &-bold-border {
    border-style: solid;
    border-width: 1px;
  }
  &-primary {
    color: #ffffff;
    @include bg-color();
    @include border-color();
  }
  &-primary-disabled {
    color: #ffffff;
    @include bg-color-disabled();
    @include border-color-disabled();
    &[disabled]:not([type]) {
      color: #ffffff;
    }
  }
  &-primary-plain {
    @include text-color();
    @include border-color();
    background-color: #ffffff;
  }
  &-primary-plain-disabled {
    @include border-color-disabled();
    &[disabled]:not([type]) {
      @include text-color-disabled();
      background-color: #ffffff;
    }
  }
  &-text {
    @include text-color();
    font-size: inherit;
    line-height: inherit;
    background-color: transparent;
    color: inherit;
    &::after {
      border: none;
    }
  }
  &-text-disabled {
    @include text-color-disabled();
    &[disabled]:not([type]) {
      @include text-color-disabled();
      background-color: transparent;
    }
  }
}

.edu-hairline-border:after {
  content: ' ';
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  left: 0;
  top: 0;
  width: 199.8%;
  height: 199.7%;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  border: 1px solid currentColor;
  z-index: 1;
}

.edu-round-circle {
  border-radius: 100rpx;
}

.edu-round-circle::after {
  border-radius: 100rpx;
}

.edu-size-default {
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding-right: 0;
  padding-left: 0;
}

.edu-size-medium {
  width: auto;
  font-size: 26rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 80rpx;
}
.edu-size-mini {
  width: auto;
  font-size: 22rpx;
  padding-top: 1px;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 20rpx;
}
</style>
